<template>
	<view class="card" :style="{backgroundImage:`url(${props.data.background})`}">
		<span class="title">
			{{props.data.title}}
		</span>
		<view class="mantle">
			{{props.data.descirption}}
		</view>
	</view>
</template>

<script setup>
	import { ref,defineProps  } from 'vue'
	
	const props = defineProps({
		data:Object
	});
	
</script>

<style lang="scss" scoped>
	.card{
		height: 300rpx;
		width: 250rpx;
		// background-color: black;
		border-radius: 10px;
		background-repeat: no-repeat;
		background-position:center center;
		background-size: cover;
		position: relative;
		overflow: hidden;
		display: inline-block;
		margin-right: 30rpx;
		// padding-top:10rpx ;
		.title{
			color: white;
			font-size: 25rpx;
			font-weight: 600;
			letter-spacing: 2rpx;
			margin-left: 15rpx;
			display: inline-block;
			padding-top: 10rpx;
		}
		.mantle{
			height: 80rpx;
			width: 100%;
			background-color: rgba(0, 0, 0,0.5);
			position: absolute;
			bottom: 0rpx;
			font-size: 18rpx;
			color: white;
			letter-spacing: 2rpx;
			text-align: center;
			line-height: 80rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>